<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按巡更ID查询</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			  body{
				  overflow-y: hidden;
				  overflow: hidden;
			  }
		</style>
	</head>
	<body>
	<div class="demoTable layui-input-inline">
		搜索ID：
		<div class="layui-inline">
			<input class="layui-input" name="ID" id="demoReload" autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>

	<div class="demoTable layui-input-inline">


		<label class="layui-form-label">时间范围：</label>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" name="riqi" id="test10" placeholder=" - ">
		</div>

		<button class="layui-btn" data-type="reload">搜索</button>
	</div>
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="getInsert">新增</button>

				<button class="layui-btn layui-btn-sm" lay-event="getRefresh">刷新</button>
			</div>
		</script>
		<script type="text/html" id='barDemo'>

			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
		</script>
		<table id="demo" lay-filter="test"></table>
		<script>
		//一般直接写在一个js文件中
		layui.use('table', function(){
		  var table = layui.table;
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,height: 550
		    ,url: 'https://mobile-ms.uat.homecreditcfc.cn/mock/611f9e5a5a76d800278620d0/example/query' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
			   {type: 'checkbox', fixed: 'left'}
		      ,{field: 'ID', title: 'ID', width:100, sort: true, fixed: 'left'}
		      ,{field: 'high', title: '高风险点位数', width:150,sort:true,edit:'text'}
		      ,{field: 'zhong', title: '中风险点位数', width:150, sort: true,edit:'text'}
		      ,{field: 'low', title: '低风险点位数', width: 150, sort: true,edit:'text'}
			  ,{field: 'sum1', title: '近期上报数量', width: 150, sort: true,edit:'text'}
			  ,{field: 'riqi', title: '日期', width: 120, sort: true}
			  ,{field:'操作',toolbar:"#barDemo"}
		    ]],
			id: 'demo',
			toolbar: '#toolbarDemo',//开启自定义工具行，指向自定义工具栏模板选择器
			defaultToolbar: ['filter', 'print', 'exports']
		  });
		  table.on('toolbar(test)', function (obj) {
		      var checkStatus = table.checkStatus(obj.config.id);
		      switch (obj.event) {

		    
		      	case 'getInsert':
		              layer.open({
		              	type: 2,
		              	area:['50%','90%'],
		              	content: "addID2.html" ,//不想让iframe出现滚动可以content: ['http://sentsin.com', 'no']
		              	title: ['人员添加', 'font-size:18px;'],
		              	shade:['0.2','red']
		              });
		              break;


		          case 'getRefresh':
		              layer.msg("这是刷新", { icon: 6, anim: 6 });
		              //location.reload();
		              break;
		      	}
		  });
		  
		  table.on('tool(test)',function(obj){
		  			var data = obj.data; //获得当前行数据
		  			 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  			 var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
		  
		  			   if(layEvent === 'detail'){ //查看
		  			     //do somehing
		  			   } else if(layEvent === 'del'){ //删除
		  			     layer.confirm('确认删除此行？', function(index){
		  			       obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
		  			       layer.close(index);
		  			       //向服务端发送删除指令
		  			     });
		  			   }
		  			 
		  			 
		  			 
		  });
			table.on('edit(test)',function(obj){
				console.log(obj);
				//获取修改后的值
				var value=obj.value;
				//获取当前修改的对象
				var data=obj.data;
				//获取修改的字段名
				var field=obj.field;
				layer.msg("【ID："+data.ID+"】的"+field+"字段的值修改为"+value);
			});


			var $ = layui.$, active = {
				reload: function(){
					var demoReload = $('#demoReload');
					var demoReload2=$('#test10');

					//执行重载
					table.reload('demo', {
						page: {
							curr: 1 //重新从第 1 页开始
						}
						,where: {
							key: {
								ID: demoReload.val()
							}
						}
					});
					table.reload('demo', {
						page: {
							curr: 1 //重新从第 1 页开始
						}
						,where: {
							key: {
								riqi: demoReload2.val()
							}
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			layui.use('laydate', function(){
				var laydate = layui.laydate;
				laydate.render({
					elem: '#test10'
					,type: 'date'
					,range: true
				});
			});
		});
		</script> 
	</body>
</html>
